<template>
  <div>
    <el-dialog
      :model-value="needWorksDialog"
      title="岗位信息库"
      width="70%"
      destroy-on-close
      :before-close="cancel"
      :close-on-click-modal="false"
    >
      <!-- 搜索按钮操作 -->
      <el-form
        ref="demandRef"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item prop="jobName">
          <el-input
            v-model="searchForm.jobName"
            placeholder="请输入岗位名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="jobKeywords">
          <el-input
            v-model="searchForm.jobKeywords"
            placeholder="请输入岗位关键词"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search"></el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="selectionDemandDetails"
        height="400"
        show-overflow-tooltip

      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column
          prop="requireEmergencyLevel"
          label="岗位紧急程度"
          width="180"
        >
          <template v-slot="scope">
            <el-tag
              type="primary"
              size="large"
              class="elTag"
              :color="
                scope.row.requireEmergencyLevel == 2
                  ? 'rgba(211, 0, 0, 0.2)' // 非常紧急-颜色变浅
                  : scope.row.requireEmergencyLevel == 0
                  ? 'rgba(10, 90, 235, 0.2)' // 一般-颜色变浅
                  : 'rgba(245, 154, 35, 0.2)' // 紧急-颜色变浅
              "
            >
              {{
                scope.row.requireEmergencyLevel == 0
                  ? "一1般"
                  : scope.row.requireEmergencyLevel == 1
                  ? "紧急"
                  : "非常紧急"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="jobCode" label="岗位编号" />
        <el-table-column prop="jobName" label="岗位名称" />
        <el-table-column prop="requireProposerName" label="需求申请人" />
        <el-table-column prop="requireDeptName" label="需求部门" />
        <el-table-column prop="requirePersonNumber" label="需求人数" />
        <el-table-column prop="hopeArrivalTime" label="希望到岗日期" />
        <el-table-column prop="closeTime" label="截至日期" />
        <el-table-column prop="proposeTime" label="申请日期" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ok"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import {
  getTalentPoolList,
  searchDepyList,
} from "@/api/recruitment/jobApplication/index.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  needWorksDialog: {
    type: Boolean,
    required: true,
    default: () => {
      return false;
    },
  },
});
const emit = defineEmits();
const searchForm = reactive({
  jobName: "",
  jobKeywords: "",
  pageNum: 1,
  pageSize: 999,
});
const tableData = ref([]);
const selectValue = ref();
const demandDetailsSearch = reactive({
  buId: "",
  name: "",
  status: 0,
});

onMounted(() => {
  getTalentPoolList(demandDetailsSearch).then((res) => {
    // demandDetailsData.value = res;
    console.log(res, "resresresres");
    tableData.value = res;
    // requireDeptName //需求部门
    // requireDeptId //任职部门id
    // requireProposerId 申请人id
  });
});
const selectionDemandDetails = (value) => {
  selectValue.value = value;
};
const ok = () => {
  proxy.$refs["demandRef"].resetFields();

  emit("ok", selectValue);
};
const cancel = () => {
  proxy.$refs["demandRef"].resetFields();
  emit("cancel");
};
</script>

<style lang="scss" scoped></style>
